<template>
    <div id="dgis">
        <div
            style="height: 100vh; width: 100%"
            id="cesiumContainer"
            class="cesiumContainer"
            ref="cesiumContainer"
        ></div>
        <div
            v-show="store.showother"
            style="width: 100%; height: 100vh"
            id="cesiumContainer2"
            class="cesiumContainer2"
            ref="cesiumContainer2"
        ></div>
        <div class="left"></div>
        <div class="right"></div>
        <layerGis></layerGis>
        <Statistics></Statistics>
        <LayerAttachment v-if="store.showother"></LayerAttachment>
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import "../../assets/cesiumcss/widgets.css";
import { mainStore } from "../../store/index";
import layerGis from "../../components/layerGis.vue";
import Statistics from "../../components/statistics.vue";
import api from "../../utils/api";
import LayerAttachment from "../../components/LayerAttachment.vue";
const store = mainStore();
store.changeImgIconList();
onMounted(() => {
    api.drop();
    api.plotting();
    api.stereoscopic();
});
</script>

<style lang="less">
#dgis {
    width: 100%;
    height: 100%;
    display: flex;
    .left,
    .right {
        position: fixed;
        width: 20%;
        height: 100vh;
        top: 0;
        pointer-events: none;
    }
    .left {
        left: 0;
        // background-color: transparent
        background: linear-gradient(to right, #173543, transparent);
    }
    .right {
        right: 0;
        background: linear-gradient(to left, #173543, transparent);
    }
}
</style>
